<template>
  <el-container>
    <el-main>
      <div class="body">
        <h1 style="text-align: center;padding: 20px">密码修改</h1>
        <div style="padding: 0px 20px">
          <el-form ref="form" style="padding: 0px 20px" label-width="85px">
            <el-form-item label="邮箱： ">
              <el-input v-model="email" disabled></el-input>
            </el-form-item>
            <el-row style="margin: 20px auto">
              <el-col :span="16">
                <el-form-item label="验证：">
                  <el-input v-model="code" placeholder="请输入验证码"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6" :offset="1">
                <el-button type="primary" :disabled=this.$data.times @click="button">{{ message }}</el-button>
              </el-col>
            </el-row>
          </el-form>
          <el-button type="success" style="width: 100%;height: 50px;font-size: 20px" @click="button2">确认</el-button>
        </div>
      </div>
    </el-main>
  </el-container>
</template>

<script>
import {request} from "@/network/request";

export default {
  name: "EmailCheck",
  data() {
    return {
      message: "发送验证码",
      times: false,
      email: this.$store.state.mail,
      code: null,
      number: null
    }
  },
  methods: {
    numbers() {
      let rn = ''
      for (let i = 0; i < 6; i++) {
        rn += Math.floor(Math.random() * 10)
      }
      this.$data.number = rn;
    },
    button() {
      this.numbers();
      request({
        url: '/email',
        params: {
          email: this.$store.state.mail,
          title: "验证码",
          centent: "您的验证码是" + this.$data.number
        }
      }).then(res => {
        if (res) {
          this.$message({
            type: 'success',
            message: '邮件已发送'
          });
          this.$data.times = true;
          this.$data.message = "60秒后重试"
          setTimeout(() => {
            this.$data.times = false
            this.$data.message = "发送验证码"
          }, 60000);
        } else {
          this.$message({
            type: 'warning',
            message: '数据错误' + err
          });
        }
      }).catch(err => {
        this.$message({
          type: 'warning',
          message: '数据错误' + err
        });
      })
    },
    button2() {
      if (this.$data.code == this.$data.number) {
        this.$router.push('/ModifyPwd')
      } else {
        this.$message({
          type: 'warning',
          message: '验证码错误'
        });
      }
    }
  }
}
</script>

<style scoped>
.body {
  border-radius: 10px;
  background-color: white;
  margin: 50px auto;
  width: 400px;
  height: 470px;
}
</style>